<template>
	<li :class="[prefixCls + '-item-group']">
		<div :class="[prefixCls + '-item-group-title']" :style="groupStyle">{{ title }}</div>
		<ul>
			<slot></slot>
		</ul>
	</li>
</template>

<script lang="ts">
	import Anes from "../base";
	import { Prop } from "vue-property-decorator";
	import { findComponentUpward, findComponentsUpward } from "../../utils/assist";
	import Submenu from "./submenu.vue";
	import Menu from "./menu.vue";
	export default class MenuGroup extends Anes {
		@Prop({ type: String, default: "" }) title!: string;
		prefixCls = "ivu-menu";

		get groupStyle() {
			if (this.hasParentSubmenu && this.menuMode !== "horizontal") {
				return { paddingLeft: 43 + (this.parentSubmenuNum - 1) * 28 + "px" };
			}
			return {};
		}
		get menu() {
			return findComponentUpward<Menu>(this, "Menu");
		}
		get menuMode() {
			return this.menu ? this.menu.mode : "";
		}
		get hasParentSubmenu() {
			return this.parentSubmenuNum > 0;
		}
		get parentSubmenuNum() {
			return findComponentsUpward<Submenu>(this, "Submenu").length;
		}
	}
</script>

<style>
</style>